<template>
    <div class="app-container">
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">

            <el-table-column align="center" :label="$t('table.showId')" width="65">
              <template slot-scope="scope">
                <span>{{scope.row.showId}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="合同编号">
              <template slot-scope="scope">
                <span>{{scope.row.contractNo}}</span>
              </template>
            </el-table-column>


            <el-table-column align="center" label="合同名称">
                <template slot-scope="scope">
                    <span>{{scope.row.contractName}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="类型" width="100px">
              <template slot-scope="scope">
                <span>{{scope.row.contractType | $contractTypeFilter}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="到期状态">
              <template slot-scope="scope">
                <span>{{scope.row.expireStatus}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="协议有效期" width="100px">
              <template slot-scope="scope">
                <span>{{scope.row.mounthNum}}月</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="开始时间">
                <template slot-scope="scope">
                    <span>{{scope.row.beginDate | $dateConvert}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="终止时间">
                <template slot-scope="scope">
                    <span>{{scope.row.endDate | $dateConvert}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="结算形式">
                <template slot-scope="scope">
                    <span>{{scope.row.balanceType | $balanceTypeFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="价格">
                <template slot-scope="scope">
                    <span>{{scope.row.totalAmount}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="合同状态">
                <template slot-scope="scope">
                    <span>{{scope.row.contractStatus | $statusFilter}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作人">
              <template slot-scope="scope">
                <span>{{scope.row.modifier}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="修改时间">
              <template slot-scope="scope">
                <span>{{scope.row.modifyTime | $dateConvert("YYYY-MM-DD HH:mm:ss")}}</span>
              </template>
            </el-table-column>


            <el-table-column align="center" :label="$t('table.actions')" width="200" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.contractType == 'IN'" v-has="'supplyContractInTable_info'" type="info" size="mini" @click="handleInfo(scope.row)">合同{{$t('table.info')}}</el-button>
                    <el-button v-else-if="scope.row.contractType == 'OUT'" v-has="'supplyContractOutTable_info'" type="info" size="mini" @click="handleInfo(scope.row)">合同{{$t('table.info')}}</el-button>

                    <el-button v-if="scope.row.contractType == 'IN' && scope.row.contractStatus == 'VALID'" v-has="'supplyContractInTable_edit'" type="primary" size="mini" @click="handleUpdate(scope.row,'info')">{{$t('table.edit')}}</el-button>
                    <el-button v-else-if="scope.row.contractType == 'OUT' && scope.row.contractStatus=='VALID'" v-has="'supplyContractOutTable_edit'" type="primary" size="mini" @click="handleUpdate(scope.row,'info')">{{$t('table.edit')}}</el-button>

                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
    import { fetchContractList, invalidSupplyContract } from '@/api/supplyContract/supplyContract'
    import waves from '@/directive/waves' // 水波纹指令
    import { parseTime } from '@/utils'

    export default {
      name: 'SupplyContractList',
      directives: {
        waves
      },
      // 接收父组件的值
      props: {
        copyrightsId: String,
        contractNo: String,
        supplyId: String,
        required: true
      },
      data() {
        return {
          tableKey: 0,
          list: null,
          total: null,
          listLoading: true,
          page: {
            page: 1,
            limit: 20,
            sort: ''
          },
          listQuery: {
            compoundSearch: undefined,
            expireStatus: undefined,
            clearMethod: undefined,
            copyrightsId: this.copyrightsId,
            contractNo: this.contractNo,
            supplyId: this.supplyId
          },
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '修改',
            create: '新增',
            info: '详情'
          },
          dialogPvVisible: false,
          pvData: [],
          rules: {
          },
          downloadLoading: false
        }
      },
      filters: {

      },
      created() {
        this.getList()
        // this.getExpireOption();
      },
      methods: {
        getList() {
          this.listLoading = true
          this.listQuery.includeInvalid = true
          fetchContractList(this.listQuery).then(response => {
            if (response.success) {
              this.list = response.content
              // this.total = response.content.total
              this.listLoading = false
            } else {
              this.$message({
                type: 'fail',
                message: response.message
              })
            }
          })
        },
        getExpireOption() {
          this.listLoading = true
          fetchContractList(this.listQuery).then(response => {
            if (response.success) {
              this.list = response.content
              // this.total = response.content.total
              this.listLoading = false
            } else {
              this.$message({
                type: 'fail',
                message: response.message
              })
            }
          })
        },
        // 搜索按钮
        handleFilter() {
          this.listQuery.page = 1
          this.getList()
        },
        // 跳转页数
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.getList()
        },
        // 详情
        handleInfo(row, status) {
          const id = row.id
          const contractType = row.contractType
          let pushName = 'supplyContractInInfo'
          if (contractType === 'OUT') {
            pushName = 'supplyContractOutInfo'
          }
          this.$router.push({ name: pushName, query: { id: id, opt: 'info' }})
        },
        // 跳转新增页面
        handleCreate() {
          this.$router.push({ name: 'supplyContractAdd' })
        },
        // 更新页面
        handleUpdate(row) {
          const id = row.id
          const contractType = row.contractType
          let pushName = 'supplyContractInEdit'
          if (contractType === 'OUT') {
            pushName = 'supplyContractOutEdit'
          }
          this.$router.push({ name: pushName, query: { id: id }})
        },
        // 删除操作
        // handleDelete(row) {
        //   this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then((response) => {
        //     // 调用删除接口
        //     var p = { id: row.id }
        //     deleteSupplyContract(p).then(response => {
        //       if (response.success) {
        //         this.getList()
        //         this.$message({
        //           type: 'success',
        //           message: '删除成功!'
        //         })
        //       } else {
        //         this.$message({
        //           type: 'fail',
        //           message: response.message
        //         })
        //       }
        //     })
        //   }).catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除'
        //     })
        //   })
        // },
        // 失效操作
        handleInvalid(row) {
          this.$confirm('失效后，该条数据不可操作，确认失效?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((response) => {
            // 调用失效接口
            var p = { id: row.id }
            invalidSupplyContract(p).then(response => {
              if (response.success) {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              } else {
                this.$message({
                  type: 'fail',
                  message: response.message
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        },
        batchInvalid() {
          // TODO 批量失效
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        }
      }
    }
</script>
